<template>
	<view class="mallCate">
		<leftAndRight>
			<template v-slot:left>
				<view style="width:200rpx;height:90vh;background:#f0f0f0">
					<view class="cateName" :style="selectI==i?{background:'#fff'}:{}" v-for="(item,i) in data" @click="select(i,item.id)">
						<view :style="selectI==i?{color:'#000',borderLeft:'10rpx solid red',fontWeight:'bold'}:{}">
							{{item.name}}
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right>
				<view style="width:550rpx;height:90vh;overflow: auto;">
					<slot></slot>
				</view>
			</template>
		</leftAndRight>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import leftAndRight from '../components/leftAndRightFlex.vue'
	const emit = defineEmits({
		handlerSelect:(e)=>{
			
		}
	})
	const props = defineProps({
		data:{
			type:Array,
			default:[]
		}
	})
	const selectI = ref(0)
	function select(i,id){
		selectI.value = i
		emit('handlerSelect',id)
	}
</script>

<style>
	.cateName{
		height:100rpx;
		line-height:100rpx;
		color:#555;
		text-align: center;
	}
</style>